import React, { Fragment, useState } from "react";
import { Input, Tree, Button } from "antd";
import style from "../../style/permissionsnav.module.scss";
const treeData = [
  {
    title: "订单管理",
    key: "1",
    children: [
      {
        title: "查询",
        key: "1-1",
      },
      {
        title: "重置",
        key: "1-2",
      },
      {
        title: "订单详情",
        key: "1-3",
      },
      {
        title: "查看保单",
        key: "1-4",
      },
    ],
  },
  {
    title: "仓库管理",
    key: "2",
    children: [
      {
        title: "查询",
        key: "2-1",
      },
      {
        title: "重置",
        key: "2-2",
      },
      {
        title: "仓库详情",
        key: "2-3",
      },
      {
        title: "新增仓库",
        key: "2-4",
      },
      {
        title: "停用仓库",
        key: "2-5",
      },
    ],
  },
  {
    title: "商品管理",
    key: "3",
    children: [
      {
        title: "查询",
        key: "3-1",
      },
      {
        title: "重置",
        key: "3-2",
      },
      {
        title: "商品详情",
        key: "3-3",
      },
      {
        title: "新增商品",
        key: "3-4",
      },
      {
        title: "下架商品",
        key: "3-5",
      },
    ],
  },
  {
    title: "角色管理",
    key: "4",
    children: [
      {
        title: "查询",
        key: "4-1",
      },
      {
        title: "重置",
        key: "4-2",
      },
      {
        title: "添加角色",
        key: "4-3",
      },
      {
        title: "查看详情",
        key: "4-4",
      },
      {
        title: "停用",
        key: "4-5",
      },
      {
        title: "删除",
        key: "4-6",
      },
      {
        title: "编辑",
        key: "4-7",
      },
    ],
  },
  {
    title: "部门管理",
    key: "5",
    children: [
      {
        title: "查询",
        key: "5-1",
      },
      {
        title: "重置",
        key: "5-2",
      },
      {
        title: "添加部门",
        key: "5-3",
      },
      {
        title: "查看详情",
        key: "5-4",
      },
      {
        title: "停用",
        key: "5-5",
      },
      {
        title: "删除",
        key: "5-6",
      },
      {
        title: "编辑",
        key: "5-7",
      },
    ],
  },
  {
    title: "账号管理",
    key: "6",
    children: [
      {
        title: "查询",
        key: "6-1",
      },
      {
        title: "重置",
        key: "6-2",
      },
      {
        title: "添加账号",
        key: "6-3",
      },
      {
        title: "查看详情",
        key: "6-4",
      },
      {
        title: "停用",
        key: "6-5",
      },
      {
        title: "删除",
        key: "6-6",
      },
      {
        title: "编辑",
        key: "6-7",
      },
    ],
  },
];
const Addrole = () => {
  const [checkedKeys, setCheckedKeys] = useState([]);

  const onCheck = (checkedKeysValue) => {
    console.log("onCheck", checkedKeysValue);
    setCheckedKeys(checkedKeysValue);
  };

  return (
    <Fragment>
      <div className={style.add}>添加角色</div>
      <div style={{ margin: "20px 0  0 0" }}>
        <span style={{ margin: "30px 10px 10px 40px" }}>角色名称:</span>
        <Input className={style.input} placeholder="请输入角色名称" />
      </div>
      <div className={style.setting}>
        <div style={{ marginBottom: "10px" }}>设置权限：</div>
        <Tree
          checkable
          onCheck={onCheck}
          checkedKeys={checkedKeys}
          treeData={treeData}
        />
        <div className={style.btns}>
          <Button>取消</Button>
          <Button style={{ margin: "0 30px" }}>确定</Button>
        </div>
      </div>
    </Fragment>
  );
};

export default Addrole;
